import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
import { UserConfigExport, ConfigEnv } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
// https://vite.dev/config/
// export default defineConfig({
//   plugins: [vue(),
//     createSvgIconsPlugin({
//       // 注：下面的这一行代码规定了“svg图标文件”只能被放置在“src/assets/icons”目录下↓
//       iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
//       symbolId: 'icon-[dir]-[name]',
//     })
//   ],
//   resolve: {
//     alias: {
//       "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
//     }
//   },
//   // 注：“css”是与“scss全局变量”有关的配置↓
//   css: {
//     preprocessorOptions: {
//       scss: {
//         javascriptEnabled: true,
//         // 注：“scss全局变量”都被定义在该文件中↓
//         /* 注：在此处，在路径中必须使用别名（@）来替代“./src”（注：“viteconfig.ts”与“src”处于同级目录下）（因为此处有“坑”：在老师给的课程笔记中，下面的这行被注释的代码是可以使用的，
//            但是我已亲测，在我的电脑上可能由于构建工具“vite”与老师使用的版本不同的缘故，“vite”会把“@import "./src/styles/variable.scss";”这行代码加入到被打包后的“/src/styles/index.scss”的起始位置，
//            并以这个“index.scss”（而非“vite.config.ts”）的所在目录为基准点去寻找“./src/styles/variable.scss”，最终会因找不到该文件而报错说“[sass] Can't find stylesheet to import.”）↓ */
//         // additionalData: '@import "./src/styles/variable.scss";',
//         additionalData: '@import "@/styles/variable.scss";',
//       },
//     },
//   },
// });
// 把上面的被作为函数“defineConfig”的参数的配置对象改写为通过“箭头函数”返回这个对象的形式↓
// 注：此处会被注入一个名为“command”的变量作为参数，这个参数被用于检测当前的开发环境（即检测当前是处于开发环境还是生产环境/测试环境），从而决定是否启用“mock”功能（注：mock接口只在开发阶段（开发环境）可用，上线阶段（生产环境）不可用）↓
// 注：此处会被注入一个名为“mode”的变量作为参数，这个参数被用于获取当前处于哪个编程环境（即获取当前是处于开发环境还是生产环境/测试环境）（“默认值”是“开发环境”）↓
export default defineConfig(({ command, mode }) => {
  // 注：“vite”的“官方中文文档”中解释了“process.cwd()”的含义：“process.cwd()”表示的是“文件‘index.html’的所在位置”（即“项目根目录”）↓
  // 注：函数“loadEnv”被用于获取当前环境下的“.env.xxx”（即“当前所处环境的配置文件”）。第一个参数（即“mode”）告诉该函数要获取哪个环境下的配置文件，第二个参数（即“process.cwd()”）告诉该函数在哪里寻找这个配置文件↓
  let objectOfCurrentEnvironment = loadEnv(mode, process.cwd());
  return {
    plugins: [vue(),
    createSvgIconsPlugin({
      // 注：下面的这一行代码规定了“svg图标文件”只能被放置在“src/assets/icons”目录下↓
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]',
    }),
    viteMockServe({
      // 注：下面的这一行代码规定了只有在开发环境下才会启用“mock”功能（也就是保证了在开发阶段可以使用mock接口）↓
      localEnabled: command === 'serve',
    }),
    ],
    resolve: {
      alias: {
        "@": path.resolve("./src") // 相对路径别名配置，使用 @ 代替 src
      }
    },
    // 注：“css”是与“scss全局变量”有关的配置↓
    css: {
      preprocessorOptions: {
        scss: {
          javascriptEnabled: true,
          // 注：“scss全局变量”都被定义在该文件中↓
          /* 注：在此处，在路径中必须使用别名（@）来替代“./src”（注：“viteconfig.ts”与“src”处于同级目录下）（因为此处有“坑”：在老师给的课程笔记中，下面的这行被注释的代码是可以使用的，
            但是我已亲测，在我的电脑上可能由于构建工具“vite”与老师使用的版本不同的缘故，“vite”会把“@import "./src/styles/variable.scss";”这行代码加入到被打包后的“/src/styles/index.scss”的起始位置，
            并以这个“index.scss”（而非“vite.config.ts”）的所在目录为基准点去寻找“./src/styles/variable.scss”，最终会因找不到该文件而报错说“[sass] Can't find stylesheet to import.”）↓ */
          // additionalData: '@import "./src/styles/variable.scss";',
          additionalData: '@import "@/styles/variable.scss";',
        },
      },
    },
    // 配置“vite”的“代理服务器”（即配置跨域）（注：此处配置的代理服务器只在开发环境下可用）↓
    server: {
      proxy: {
        //注：“/api”是在本项目中发送网络请求时，请求的“url”的“公共前缀”。（如果在发送请求时不携带这个公共前缀，那么代理服务器就不会去帮忙转发请求，获取数据）↓ 
        // '/api':{}
        // 注：此处通过代码“[env.VITE_APP_BASE_API]”获取到了各个环境下，代理跨域时需要使用到的“公共前缀”↓
        [objectOfCurrentEnvironment.VITE_APP_BASE_API]: {
          // 注：属性“target”规定了代理服务器会将请求转发到哪里去（即目标服务器的地址（获取数据的服务器地址））↓
          // target: 'http://jsonplaceholder.typicode.com',
          target: objectOfCurrentEnvironment.VITE_SERVE,
          // 注：属性“changeOrigin”被用于配置是否要更改请求的“origin”（即是否要让代理服务器在转发请求时，将请求头中的“origin”改为目标服务器的地址）（但不知何故，老师却说该选项是被用于配置“是否跨域”）（文心快码对此做出了澄清：老师的说法“它被用于配置是否跨域”虽然在一定程度上反映了changeOrigin与跨域请求之间的关系，但并不准确。changeOrigin并不直接决定是否可以跨域，而是影响跨域请求能否成功的一个因素）↓
          changeOrigin: true, // 此处设置为“true”，表示“需要更改请求的origin”（即需要将请求头中的“origin”改为目标服务器的地址）
          // 注：属性“rewrite”（中文含义：路径重写）规定了代理服务器在转发请求时，需要将请求的url中的哪些部分替换为其他内容（在此处是将公共前缀替换为空字符串）↓
          rewrite: (path) => path.replace(/^\/api/, ''),
        }
      }
    }
  }
});
